<template>
  <lay-layer v-model="layerRef.open"
             :title="layerRef.title"
             :area="layerRef.area"
             :shade-close="layerRef.shadeClose"
             :maxmin="layerRef.maxmin">

    <div style="padding: 20px">

      <lay-container fluid="true" class="fly-container" style="height: 100% !important;">
        <lay-card class="fly-search-card" style="    padding-top: 0 !important;">
          <lay-form>

            <lay-form-item label="岗位名称" prop="clazzTitle" mode="inline">
              <lay-input v-model="clazzTitle"></lay-input>
            </lay-form-item>

            <lay-form-item mode="inline">
              <lay-button class="fly-button fly-button-search" type="primary" size="sm"
                          @click=" reloadClazzDate() ">
                <lay-icon class="layui-icon-search"></lay-icon>
                查询
              </lay-button>
            </lay-form-item>
          </lay-form>
        </lay-card>

        <div class="fly-table-box">

          <lay-table :page="false"
                     :columns=" clazzInfoColumns "
                     :loading=" tableClazzInfoData.loading "
                     :data-source=" tableClazzInfoData.rows "
                     v-model:selected-keys="selectedKeys"
                     @change=" reloadClazzDate ">
            <template v-slot:toolbar>
              <lay-button size="sm" type="primary" class="fly-button fly-toolbar-addition"
                          style="width: 120px !important;" @click=" onTapClazzInfoBatchAdd ">
                <lay-icon class="layui-icon-addition"></lay-icon>
                批量添加
              </lay-button>
            </template>

            <template v-slot:operator="{ row }">
              <lay-button size="sm" type="primary" class="fly-button fly-edit-button"
                          @click=" onTapClazzInfo(row) ">
                <lay-icon class="layui-icon-addition"></lay-icon>
                添加
              </lay-button>
            </template>
          </lay-table>


          <lay-page v-model="flyLayPage.page"
                    v-model:limit="flyLayPage.limit"
                    :layout="flyLayPage.layout"
                    :pages="flyLayPage.pages"
                    :limits="flyLayPage.limits"
                    theme="blue"
                    :total=" tableClazzInfoData.total"
                    @change="previousNextPage" style="margin-top: 15px"></lay-page>

        </div>
      </lay-container>
    </div>


  </lay-layer>
</template>


<script setup lang="ts" name="refDeptClazz">
import {reactive, ref} from "vue";
import useClazzInfoComposable from '@/composables/admin/ClazzInfoComposable';
import {DeptInfo} from "@/api/admin/model/DeptInfoModel";
import AuthClazzDeptApi from "@/api/auth/AuthClazzDeptApi";
import {layer} from "@layui/layui-vue";
import DeptInfoApi from "@/api/admin/DeptInfoApi";

const authClazzDeptApi = new AuthClazzDeptApi()
const deptInfoApi = new DeptInfoApi()


const {
  flyLayPage,
  tableClazzInfoData,
} = useClazzInfoComposable();

/* 批量选择的id值 */
const selectedKeys = ref([]);

const deptInfoModel = ref<DeptInfo>();

const clazzTitle = ref<string>('');

/**
 * 分页列表展示项
 */
const clazzInfoColumns = [
  {title: "选项", width: "55px", type: "checkbox", fixed: "left"},
  {title: '岗位代码', key: 'clazzCode', ellipsisTooltip: true, align: 'center'},
  {title: '岗位名称', key: 'clazzTitle', ellipsisTooltip: true, align: 'center'},
  {title: '操作', width: '200px', customSlot: 'operator', key: 'operator', align: 'center', fixed: 'right'}
];

/**
 * 单个添加
 * @param row
 */
const onTapClazzInfo = (row: any) => {
  saveDataHandler(row.id);
}

/**
 * 批量添加
 */
const onTapClazzInfoBatchAdd = () => {
  if (null === selectedKeys.value || 0 === selectedKeys.value.length) {
    layer.msg('请选择岗位！', {time: 1500, icon: 2});
    return;
  }
  saveDataHandler(selectedKeys.value.join(','));
}


/**
 * 数据入库
 * @param selectedKeys 选中的数据
 */
const saveDataHandler = (keys: string) => {
  deptInfoModel.value

  let authClazzDept = {
    id: '',  // ID
    ids: keys,
    deptCode: deptInfoModel.value?.deptCode,  // 部门代码
    deptTitle: deptInfoModel.value?.title,  // 部门名称
    deptLevel: deptInfoModel.value?.levelCode,  // 部门层级
    validFlag: 'Y',  // 有效标志: Y-是;N-否
  }

  authClazzDeptApi.saveInfo(authClazzDept).then(res => {
    layer.msg(res.msg, {time: 1500, icon: 1});
    onTapClose();
    emit('click')
  })

}


/**
 * 上一页, 下一页
 * @param current
 * @param limit
 */
const previousNextPage = ({current = 1, limit = 10}) => {
  deptInfoApi.findClazzList(deptInfoModel.value?.id, clazzTitle.value, current, limit).then(res => {
    tableClazzInfoData.total = res.data.total;
    tableClazzInfoData.rows = res.data.rows;
  })
}

/**
 * 点击刷新按钮
 */
const reloadClazzDate = () => {
  deptInfoApi.findClazzList(deptInfoModel.value?.id, clazzTitle.value, 1, flyLayPage.limit).then(res => {
    tableClazzInfoData.total = res.data.total;
    tableClazzInfoData.rows = res.data.rows;
  })
}

/* 弹窗 */
const layerRef = reactive<any>({
  open: false,
  title: '岗位设置',
  area: ['80%', '80%'], // 高度, 宽度
  disabled: false,
  shadeClose: false,
  maxmin: false,
  submit: true,
})

//显示弹框
const open = (deptInfo: DeptInfo) => {
  deptInfoModel.value = deptInfo;
  layerRef.title = '【' + deptInfo.title + '】岗位信息';
  deptInfoApi.findClazzList(deptInfo.id, clazzTitle.value, 1, flyLayPage.limit).then(res => {
    tableClazzInfoData.total = res.data.total;
    tableClazzInfoData.rows = res.data.rows;
  })
  layerRef.open = true;
};


/**
 * 关闭按钮
 */
const onTapClose = () => {
  layerRef.open = false;
}


//在组件中，属性和方法，只能对当前template,
//外部需要使用的时候，需要使用 defineExpose 暴露出去给父组件
defineExpose({
  open,
  onTapClose
});

const emit = defineEmits(['click']);
</script>


<style scoped>
.layui-select {
  width: 100% !important;
}
</style>